<template>
  <div class="laborMsg">
    <el-card>
      <!-- 基本信息 -->
      <div class="anchorMsg">
        <p>基本信息</p>
        <div class="comStyle">
          <ul>
            <li>
              <span>工会名称</span>
              <el-input v-model="laborName" disabled> </el-input>
            </li>
            <li>
              <span>负责人</span>
              <el-input v-model="laborPerson" disabled> </el-input>
            </li>
          </ul>
          <ul>
            <li>
              <span>工会ID</span>
              <el-input v-model="laborID" disabled> </el-input>
            </li>
            <li>
              <span>联系方式</span>
              <el-input v-model="phone" disabled> </el-input>
            </li>
          </ul>
          <ul>
            <li>
              <span>创建时间</span>
              <el-input v-model="creatTime" disabled> </el-input>
            </li>
          </ul>
        </div>
      </div>
      <!-- 收益信息 -->
      <div class="anchorTitle">
        <p>收益信息</p>
        <div class="comStyle">
          <ul>
            <li>
              <span>现有主播人数</span>
              <el-input v-model="peopleNum" disabled> </el-input>
            </li>
            <li>
              <span>已结算收益</span>
              <el-input v-model="settlement" disabled> </el-input>
            </li>
          </ul>
          <ul>
            <li>
              <span>总创造收益</span>
              <el-input v-model="totalRevenue" disabled> </el-input>
            </li>
          </ul>
          <ul>
            <li>
              <span>待结算收益</span>
              <el-input v-model="unsettled" disabled> </el-input>
            </li>
          </ul>
        </div>
      </div>
      <!-- 结算信息 -->
      <div class="realMsg">
        <p>结算信息</p>
        <div class="comStyle">
          <ul>
            <li>
              <span>结算方式</span>
              <!-- <el-input v-model="settlementStyle" disabled></el-input> -->
              <el-select v-model="settlementStyle" placeholder="请选择">
                <el-option label="日结" value="1"> </el-option>
                <el-option label="月结" value="2"> </el-option>
              </el-select>
            </li>
            <li>
              <span>结算税率</span
              ><el-input v-model="taxRate" disabled></el-input> %
            </li>
            <li>
              <span>收款银行</span><el-input v-model="bank" disabled></el-input>
            </li>
          </ul>
          <ul>
            <li>
              <span>结算时间</span
              ><el-input v-model="settlementTime" disabled></el-input>
            </li>
            <li>
              <span>收款人</span><el-input v-model="payee" disabled></el-input>
            </li>
          </ul>
          <ul>
            <li>
              <span>结算比例</span
              ><el-input v-model="settlementProportion" disabled></el-input> %
            </li>
            <li>
              <span>收款卡号</span
              ><el-input v-model="cardNum" disabled></el-input>
            </li>
          </ul>
        </div>
      </div>
      <!-- 账号信息 -->
      <div class="contact">
        <p>账号信息</p>
        <div class="comStyle">
          <ul>
            <li>
              <span>登录账号</span><el-input v-model="accLogin"></el-input>
            </li>
          </ul>
          <ul>
            <li>
              <el-button @click="checkPwd">更改密码</el-button>
            </li>
          </ul>
        </div>
      </div>
    </el-card>

    <!-- 修改密码弹框 -->
    <el-dialog title="更换密码" :visible.sync="dialogFormVisible" width="30%">
      <el-form :model="form">
        <el-form-item label="账号" :label-width="formLabelWidth">
          <el-input disabled v-model="form.acc" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item disabled label="旧密码" :label-width="formLabelWidth">
          <el-input
            v-model="form.oldPwd"
            show-password
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" :label-width="formLabelWidth">
          <el-input
            v-model="form.newPwd"
            show-password
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" :label-width="formLabelWidth">
          <el-input
            v-model="form.subnewPwd"
            show-password
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitPwd">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { AdminUnionUnionDetails, reversePwd_api } from "@/api/union";
import moment from "moment";
export default {
  data() {
    return {
      obj: {},
      laborName: "", //工会名称
      laborPerson: "", //负责人
      laborID: "", //工会ID
      phone: "", //联系方式
      creatTime: "", //创建时间
      peopleNum: "", //现有主播人数
      settlement: "", //已结算收益
      totalRevenue: "", //总创造收益
      unsettled: "", //待结算收益
      settlementStyle: "", //结算方式
      taxRate: "", //结算税率
      bank: "", //收款银行
      settlementTime: "", //结算时间
      payee: "", //收款人
      settlementProportion: "", //结算比例
      cardNum: "", //收款卡号
      accLogin: "", //登录账号

      formLabelWidth: "120px",
      dialogFormVisible: false,
      form: {
        acc: "",
        newPwd: "",
        oldPwd: "",
        subnewPwd: "",
      },
    };
  },
  created() {
    this.obj = JSON.parse(localStorage.getItem("unionId"));
    this.getLabor();
  },
  methods: {
    //   更改密码
    checkPwd() {
      this.dialogFormVisible = true;
      this.form.acc = this.obj.account;
    },
    submitPwd() {
      if (this.form.newPwd == this.form.oldPwd) {
        this.$message({
          type: "info",
          message: "新密码与旧密码不能一致!",
        });
        return;
      }
      if (this.form.subnewPwd != this.form.newPwd) {
        this.$message({
          type: "info",
          message: "两次密码不一致!",
        });
        return;
      }
      this.$confirm(`是否确认修改`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await reversePwd_api({
            union_id: this.obj.id,
            account: this.form.acc,
            password: this.form.newPwd,
          });
          if (res.code == 0) {
            this.$message({
              type: "success",
              message: "修改成功成功!",
            });
            this.dialogFormVisible = false;
            this.getLabor();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消修改",
          });
        });
    },

    async getLabor() {
      let { code, data } = await AdminUnionUnionDetails({
        id: this.obj.id,
        phone: "",
      });
      if (code == 0) {
        this.laborName = data[0].name;
        this.laborPerson = data[0].leader;
        this.laborID = data[0].id;
        this.phone = data[0].phone;
        this.totalRevenue = data[0].union_diamond_income;
        this.unsettled = data[0].unsettled_diamond;
        this.settlement = data[0].settled_diamond;
        this.cardNum = data[0].bank_card_number;
        this.payee = data[0].reserved_name;
        this.bank = data[0].bank_name;
        this.form.oldPwd = data[0].password;

        this.creatTime = moment(data[0].create_time * 1000).format(
          "YYYY-MM-DD hh:mm:ss"
        );
        this.peopleNum = data[0].anchor_num;
        this.accLogin = data[0].account;
        this.settlementStyle = data[0].type;
        this.settlementTime = data[0].settlement_time + `号`;
        this.settlementProportion = data[0].ratio;
        this.taxRate = data[0].tax_rate;
        console.log(data, "9527");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.laborMsg {
  margin: 30px;
  height: 100%;
  .el-card {
    p {
      font-size: 16px;
      font-weight: bold;
    }
    .comStyle {
      width: 100%;
      display: flex;
      justify-content: space-around;
      ul {
        display: flex;
        flex-direction: column;
        width: 30%;
        li {
          list-style: none;
          margin-bottom: 10px;
          span {
            width: 100px;
            display: inline-block;
          }
        }
      }
    }
  }
  /deep/.el-input {
    width: 260px;
  }
}
</style>